<template>
	<div id="QRcodeGeneration">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><h1><i class="el-icon-lx-cascades"></i> 二维码（将文本生成二维码）</h1></el-breadcrumb-item>				
            </el-breadcrumb>
        </div>
		<el-row>
			<el-col :span="18" class="qrcol">
				<el-card :body-style="{ padding: '0px' }">
					<el-input type="textarea" :autosize="{ minRows: 10, maxRows: 10}" v-model="QrCodeTextarea" placeholder="请输入内容">
					</el-input>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card :body-style="{ padding: '0px' }">
					<div id="qrcode" ref="qrcodeContainer"></div>
				</el-card>
			</el-col>
		</el-row>

        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><h1><i class="el-icon-lx-cascades"></i> 条形码（将文本生成条形码）</h1></el-breadcrumb-item>				
            </el-breadcrumb>
        </div>
		<el-row>
			<el-col :span="18" class="qrcol">
				<el-card :body-style="{ padding: '0px' }">
					<el-input type="textarea" :autosize="{ minRows: 10, maxRows: 10}" maxlength="25" v-model="BarcodeTextarea" placeholder="请输入内容">
					</el-input>
				</el-card>
			</el-col>
			<el-col :span="6" >
				<el-card :body-style="{ padding: '0px' }" >
					<svg id="barcode"  class="BarcodeStyle"></svg>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import QRCode from 'qrcodejs2'
	import JsBarcode from 'jsbarcode'
	export default {
		data: function() {
			return {
				keyword: '',
				QrCodeTextarea: '',
				BarcodeTextarea: ''
			}
		},
		mounted() { //调用
			this.qrcode();
			this.barcode();
		},
		methods: {
			qrcode() {
				let tqrcode = new QRCode('qrcode', {
					width: 200,
					height: 200, // 高度  [图片上传失败...(image-9ad77b-1525851843730)]
					text: this.QrCodeTextarea, // 二维码地址 
					render: 'table', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
					background: '#f0f',
					foreground: '#ff0',
					colorDark: "#000",
					colorLight: "#fff",
				})
			},
			barcode() {
				JsBarcode("#barcode", this.BarcodeTextarea, {
					format: "CODE128", //选择要使用的条形码类型
					// lineColor: "#0aa",
					// 　　 　　   width: 4,
					// 　　 　　   height: 40,
					width: '1px',
					height: '55px',
					fontSize: '22px', //字体大小
					displayValue: true, //是否在条形码下方显示文字
					textPosition: "top" //设置文本的垂直位置
				});
			}
		},
		watch: {
			// 如果 `question` 发生改变，这个函数就会运行
			QrCodeTextarea: function() {
				let qrcodeEL = document.getElementById("qrcode");
				let qrcode = new QRCode(qrcodeEL);
				document.getElementById("qrcode").innerHTML = "";
				this.showQRCode = true;
				this.qrcode();
				// this.barcode();
			},
			BarcodeTextarea: function() {
				// let barcodeEL = document.getElementById("barcode");			
				document.getElementById("barcode").innerHTML = "";
				this.barcode();
			},
		},
		computed: {
			list() {
				return this.iconList.filter((item) => {
					return item.indexOf(this.keyword) !== -1;
				})
			}
		}
	}
</script>

<style>
	#qrcode {
		display: inline-block;

	}

	#QRcodeGeneration {

		text-align: center;
	}

	.qrcol {
		border-radius: 4px;
		min-height: 200px;
		/* background-color: #B3E19D; */
	}
	
	.BarcodeStyle {
		border-radius: 4px;
		min-height: 200px;
		/* background-color: #B3E19D; */
	}
</style>
